<template>
	<view class="tourism-schedule">
		<z-navbar></z-navbar>
		<amap :markers="markers" :latitude="scenicSpot.lat" :longitude="scenicSpot.lng" :scale="scale"
			:polyline="polyline" @onMarkertap="onMarkertap">
		</amap>
		<view v-if="isBubble" @tap="jumpFineFood(scenicSpot)" class="scenic-area text-center">
			<image v-if="scenicSpot.photos && scenicSpot.photos.length > 0" :src="scenicSpot.photos[0].url"
				mode="aspectFill"></image>
			<view class="describe margin_l_r15 flex justify-between align-center">
				<view class="color_fff text-left">
					<view class="fontS28">{{scenicSpot.gpt_source_name}}</view>
					<view class="fontS20 text-beyond-multi1">{{scenicSpot.official_source_name}}</view>
				</view>
				<view class="score-num">{{scenicSpot.rating}}</view>
			</view>
		</view>
		<view class="po_fiexd">
			<u-popup mode="bottom" :show="showPopup" bgColor="transparent" :overlay="false" :round="20" :zIndex="1">
				<view @tap="onUnpack" class="flex">
					<image class="arc" src="/static/image/common/arc.png" mode=""></image>
					<view class="line-absolute flex justify-center">
						<view class="line"></view>
					</view>
				</view>
				<view class="padding_l_r20 gradual-change">
					<view class="bg_color_fff slide">
						<scroll-view scroll-y :style="{height: scrollHeight}" :scroll-into-view="scrollViewId">
							<view class="hot-city">
								<view class="margin_l_r20">
									<view v-if="city && city.weather" class="flex align-center">
										<image class="width_32 height_32" src="/static/image/icon/lng_icon.png" mode="">
										</image>
										<text class="fontS28 color_6D6D6D margin_l_r15">中国 · {{city.pname}} ·
											{{city.alias}}</text>
										<template v-if="city.weather.indexOf('多云') != -1">
											<image class="width_40 height_40" src="/static/image/icon/cloudy.png"
												mode="">
											</image>
										</template>
										<template v-if="city.weather.indexOf('晴') != -1">
											<image class="width_40 height_40" src="/static/image/icon/clear.png"
												mode="">
											</image>
										</template>
										<template v-if="city.weather.indexOf('阴') != -1">
											<image class="width_40 height_40" src="/static/image/icon/yin.png" mode="">
											</image>
										</template>
										<template
											v-if="city.weather.indexOf('小雨') != -1 || city.weather.indexOf('中雨') != -1 || city.weather.indexOf('大雨') != -1|| city.weather.indexOf('暴雨') != -1">
											<image class="width_40 height_40" src="/static/image/icon/rain.png" mode="">
											</image>
										</template>
										<template v-if="city.weather.indexOf('阵雨') != -1">
											<image class="width_40 height_40" src="/static/image/icon/thundershower.png"
												mode="">
											</image>
										</template>
										<template v-if="city.weather.indexOf('雪') != -1">
											<image class="width_40 height_40" src="/static/image/icon/snow.png" mode="">
											</image>
										</template>
										<text class="fontS24 color_6D6D6D mar_left15">{{city.weather}}
											{{city.temperature}}˚C</text>
									</view>

									<view class="flex justify-between mar_top40 title">
										<!-- <text class="fontS36 mar_right40">国庆7天成都周边游，这5个地方一定要去！</text> -->
										<input class="input-box" placeholder-style="color: #999999" type="text"
											v-model="state.planInfo.title" placeholder="请输入计划标题">
										<image @tap="state.planInfo.title = ''" class="width_32 height_32 mar_top10"
											src="/static/image/icon/close.png" mode="">
										</image>
									</view>

									<view class="font-box p_relative mar_top20">
										<template v-if="disabled">
											<scroll-view class="plan-content fontS28 color_222222" scroll-y>
												<u-parse @linktap="richTextOperate" selectable
													:content="state.planInfo.plan">
												</u-parse>
											</scroll-view>
										</template>
										<template v-else>
											<u-textarea height="500rpx" :disabled="disabled" border="none"
												v-model="state.planInfo.plan" :maxlength="-1"></u-textarea>
										</template>
										<view @tap="onAdjustmentPlan" class="unfold-box flex align-center">
											<text class="fontS24 color_E5725F">点击可调整攻略</text>
											<image class="width_40 height_40" src="/static/image/icon/unfold.png"
												mode="">
											</image>
										</view>
									</view>
								</view>
								<view class="mar_top40 mar_left20">
									<view class="flex align-center">
										<text class="fontS32 color_222222 bold">上传图片</text>
										<text class="fontS28 color_6D6D6D">（默认第一张为封面/单图最大1MB）</text>
									</view>
									<z-upload :planUuid="planUuid" :fileList="state.planInfo.images"
										@uploadSuccess="uploadSuccess" @onDeleteSuccess="onDeleteSuccess"></z-upload>
								</view>
							</view>
							<view id="bottom"></view>
						</scroll-view>
						<view class="padding_l_r20 bg_color_fff">
							<view class="line-sun mar_top20 mar_bottom20"></view>
							<view v-if="!isOpen" @tap="onOpen" class="flex align-center">
								<image class="width_32 height_32" src="/static/image/icon/open.png" mode=""></image>
								<text class="fontS28 color_222222 margin_l_r15">公开发布</text>
							</view>
							<view v-else @tap="onOpen" class="flex align-center">
								<image class="width_32 height_32" src="/static/image/icon/open_close.png" mode="">
								</image>
								<text class="fontS28 color_222222 margin_l_r15">仅自己可见</text>
							</view>
							<view class="flex justify-between align-center mar_top50">
								<view @tap="onSaveDraft" class="draft-box flex justify-center align-center mar_right40">
									<image class="width_40 height_40" src="/static/image/icon/draft.png" mode="">
									</image>
									<text class="fontS28 color_6D6D6D mar_left15">存草稿</text>
								</view>
								<view @tap="onIssuePlan(1)" class="issue-box flex justify-center align-center">
									<image class="width_42 height_42" src="/static/image/icon/issue.png" mode="">
									</image>
									<text class="fontS28 color_fff mar_left15">发布</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</u-popup>
			<z-tabbar :current="1" inactiveColor="rgba(255,255,255,0.6)" @onReLaunch="onReLaunch"></z-tabbar>
		</view>
	</view>
</template>

<script setup>
	import amap from '@/components/amap/amap.vue';
	import zNavbar from '@/components/z-navbar/z-navbar.vue';
	import zTabbar from '@/components/z-tabbar/z-tabbar.vue';
	import zUpload from '@/components/z-upload/z-upload.vue';
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance
	} from 'vue';

	import {
		onLoad,
		onShow,
		onUnload,
		onHide,
		onShareAppMessage
	} from '@dcloudio/uni-app';

	const {
		proxy
	} = getCurrentInstance();

	// 是否公开
	const isOpen = ref(false);
	const onOpen = () => {
		isOpen.value = !isOpen.value
	}
	// 展开收起
	const isShow = ref(false);
	// 景区气泡
	const isBubble = ref(false);
	const showPopup = ref(true);
	// 设置scroll的高度
	const scrollHeight = ref('auto')
	const setScrollHeight = (descHeight = 0) => {
		uni.getSystemInfo({
			success: (res) => {
				scrollHeight.value = `calc(${res.screenHeight}px - 960rpx - ${descHeight}px)`
			}
		})
	}
	// 是否禁用文本域
	const disabled = ref(true)

	// 所在城市
	const city = ref('');
	// 计划id
	const planUuid = ref('');
	const state = reactive({
		planInfo: {}
	})

	const formData = ref({
		title: '',
		content: ''
	})

	// 上传图片成功重新获取计划
	const uploadSuccess = async (el) => {
		const res = await proxy.$api.getPlans(planUuid.value);
		if (res.code === "10000") {
			state.planInfo.images = res.data.images
		}
	}
	// 删除上传图片
	const onDeleteSuccess = async (el) => {
		const res = await proxy.$api.getPlans(planUuid.value);
		if (res.code === "10000") {
			state.planInfo.images = res.data.images
		}
	}
	// 前往美食
	const jumpFineFood = (el) => {
		uni.navigateTo({
			url: `/tourism-schedule-pages/fine-food/fine-food?info=${JSON.stringify(el)}&planUuid=${planUuid.value}&type=note`
		})
	}

	const onReLaunch = (el) => {
		uni.reLaunch({
			url: el
		})
	}

	// poi信息
	const pois = ref({});
	// 景点详细
	const scenicSpot = ref({});
	// 地图标记点
	const markers = ref([]);
	// 路线规划图
	const polyline = ref([{
		// 每个点的经纬度
		points: [],
		// 颜色
		color: "#E5725F",
		// 宽度
		width: 10,
		// clickable: true,
		arrowLine: true,
		// colorList: true,
	}])
	// 缩放级别
	const scale = ref(10);

	// 获取计划
	const getPlansInfo = async () => {
		const res = await proxy.$api.getPlans(planUuid.value);
		if (res.code === "10000") {
			proxy.$api.map(res.data.city).then(resolved => {
				city.value = resolved.data
			});

			pois.value = JSON.parse(res.data.poiInfo);
			Object.keys(pois.value.poi_data).forEach(item => {
				const reg = `<span style='color: #E5725F;font-weight: bold;'>${item}</span>`;
				const n =
					`<a href="${item}" style="color: #E5725F;font-weight: bold;text-decoration:underline;">${item}</a>`;

				res.data.plan = res.data.plan.replace(reg, n);
			})
			// 换行
			res.data.plan = res.data.plan.replaceAll("\n", "<br>");

			state.planInfo = res.data;
			markers.value = [];
			Object.keys(pois.value.poi_data).forEach((item, index) => {
				const maks = pois.value.poi_data[item];
				// markers.value.push({
				// 	id: maks.id,
				// 	latitude: maks.lat,
				// 	longitude: maks.lng,
				// 	width: 80,
				// 	height: 80,
				// })
				
				markers.value.push({
					id: maks.id,
					latitude: maks.lat,
					longitude: maks.lng,
					iconImg: JSON.parse(maks.photos)[0].url,
					iconPath: '/static/image/icon/lng_icon.png',
					width: 1,
					height: 1,
					customCallout: {
						anchorY: 0,
						anchorX: 0,
						display: 'ALWAYS'
					}
				})
				
				polyline.value[0].points.push({
					latitude: maks.lat,
					longitude: maks.lng,
				})
			})
		}
		
		console.log(state.planInfo.plan,'plan')
	}
	// 点击富文本地名
	const richTextOperate = (event) => {
		scenicSpot.value = pois.value.poi_data[event.innerText];
		if (typeof(scenicSpot.value.photos) == "string") {
			scenicSpot.value.photos = JSON.parse(scenicSpot.value.photos);
		}
		isBubble.value = true;
		isShow.value = true;
		scrollHeight.value = 130 + 'rpx';
		scale.value = 16;
	}

	// 点击地图标记
	const onMarkertap = (el) => {
		Object.keys(pois.value.poi_data).forEach((item, index) => {
			const maks = pois.value.poi_data[item];
			if (maks.id == el) {
				scenicSpot.value = maks;
			}
		})
		if (typeof(scenicSpot.value.photos) == "string") {
			scenicSpot.value.photos = JSON.parse(scenicSpot.value.photos);
		}
		isBubble.value = true;
		isShow.value = true;
		scrollHeight.value = 130 + 'rpx';
		scale.value = 16;
	}
	// 调整富文本内容
	const onAdjustmentPlan = () => {
		setScrollHeight();
		disabled.value = false;
		state.planInfo.plan = state.planInfo.plan.replaceAll("<br>", "\n");
		Object.keys(pois.value.poi_data).forEach(item => {
			const reg =
				`<a href="${item}" style="color: #E5725F;font-weight: bold;text-decoration:underline;">${item}</a>`;
			state.planInfo.plan = state.planInfo.plan.replace(reg, item);
		})
	}

	// 展开收起
	const onUnpack = () => {
		isBubble.value = false;
		isShow.value = !isShow.value;
		if (isShow.value) {
			scrollHeight.value = 130 + 'rpx';
		} else {
			scale.value = 10;
			setScrollHeight();
		}
	}

	// 初始化滚动
	const scrollViewId = ref('');
	const initScrollBar = () => {
		setTimeout(() => {
			scrollViewId.value = ''
			setTimeout(() => {
				scrollViewId.value = 'bottom'
				setTimeout(() => {
					scrollViewId.value = ''
				}, 100)
			}, 100)
		}, 100)
	}

	// 发布
	const onIssuePlan = (status) => {
		if (!state.planInfo.title) {
			uni.showToast({
				title: '请输入标题！',
				icon: 'none',
				duration: 1200
			})
			return;
		}

		if (!state.planInfo.images || state.planInfo.images.length <= 0) {
			uni.showToast({
				title: '至少上传一张封面图！',
				icon: 'none',
				duration: 1200
			})
			initScrollBar();
			return;
		}

		proxy.$api.plansSave({
			planUuid: planUuid.value,
			title: state.planInfo.title,
			content: state.planInfo.plan,
			poiInfo: state.planInfo.poiInfo,
			city: state.planInfo.city,
			privateView: isOpen.value,
			status: status
		}).then(res => {
			if (res.code === "10000") {
				uni.showToast({
					title: '操作成功',
					duration: 2000
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/my/my'
					})
				}, 1500)
			}
		})
	}
	// 存草稿
	const onSaveDraft = () => {
		proxy.$api.plansSave({
			planUuid: planUuid.value,
			title: state.planInfo.title,
			content: state.planInfo.plan,
			poiInfo: state.planInfo.poiInfo,
			city: state.planInfo.city,
			privateView: isOpen.value,
			status: 0
		}).then(res => {
			if (res.code === "10000") {
				uni.showToast({
					title: '存入草稿成功',
					duration: 2000
				})
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/my/my'
					})
				}, 1500)
			}
		})
	}

	onShow(() => {
		setScrollHeight();
	})

	onLoad((options) => {
		planUuid.value = options.planUuid;
		getPlansInfo();
	})


	// 页面销毁存草稿
	onHide(() => {
		proxy.$api.plansSave({
			planUuid: planUuid.value,
			title: state.planInfo.title,
			content: state.planInfo.plan,
			poiInfo: state.planInfo.poiInfo,
			city: state.planInfo.city,
			privateView: isOpen.value,
			status: 0
		}).then(res => {

		})
	})
</script>

<style lang="scss" scoped>
	.tourism-schedule {
		height: 100vh;
		overflow: hidden;
	}

	:deep(.u-tabbar__content__item-wrapper) {
		background: rgba(0, 0, 0, 0.6) !important;
	}

	:deep(.u-transition) {
		bottom: calc(-75rpx + var(--status-bar-height)) !important;
	}

	:deep(.u-safe-bottom) {
		background-color: rgba(0, 0, 0, 0.6) !important;
	}

	:deep(.u-upload__wrap__preview) {
		display: none !important;
	}

	:deep(.u-popup__content) {
		position: relative;
		bottom: 120rpx;
	}

	:deep(.u-textarea) {
		background: transparent !important;
		padding: 20rpx !important;
	}

	:deep(._root) {
		white-space: pre-wrap !important;
		word-break: break-all !important;
		word-wrap: break-word !important;
	}

	.plan-content {
		height: 500rpx;
		padding: 20rpx;
		box-sizing: border-box;
		white-space: pre-wrap;
		word-break: break-all;
		word-wrap: break-word;
	}

	.input-box {
		flex: 1;
		margin-right: 30rpx;
		font-size: 36rpx;
		color: #222222;
	}

	.scenic-area {
		width: 280rpx;
		height: 320rpx;
		border-radius: 16rpx;
		border: 1rpx solid #FF583A;
		position: absolute;
		left: 50%;
		top: 21%;
		transform: translate(-50%, -50%);

		image {
			width: inherit;
			height: inherit;
			border-radius: inherit;
			position: relative;
		}

		.describe {
			width: 260rpx;
			position: absolute;
			bottom: 0;

			.score-num {
				font-size: 56rpx;
				font-weight: bold;
				color: #FF583A;
			}
		}
	}

	.arc {
		width: 100%;
		height: 162rpx;
		backdrop-filter: blur(6rpx);
	}

	.po_fiexd {
		position: relative;
		// bottom: var(--status-bar-height);
		width: 100%;

		.line-absolute {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translate(-50%);
		}

		.line {
			margin-top: 30rpx;
			width: 160rpx;
			height: 8rpx;
			opacity: 0.8;
			background-color: #FFFFFF;
		}

		.gradual-change {
			background: rgba(0, 0, 0, 0.6);
			backdrop-filter: blur(6rpx);
			padding-bottom: 30rpx;
		}

		.slide {
			background-color: #fff;
			border-radius: 24rpx;
			padding-top: 27rpx;
			padding-bottom: 30rpx;
		}

		.hot-city {
			width: inherit;
			display: flex;
			flex-direction: column;


			.title {
				font-family: PingFang SC;
				font-style: normal;
				font-weight: 500;
				line-height: normal;
				color: #222222;
			}
		}

		.font-box {
			height: 590rpx;
			border-radius: 16rpx;
			background: rgba(109, 109, 109, 0.1);

			.unfold-box {
				padding-top: 10rpx;
				position: absolute;
				bottom: 15rpx;
				left: 50%;
				transform: translate(-50%);
			}
		}
	}


	.line-sun {
		width: inherit;
		height: 2rpx;
		opacity: 0.3;
		background: #6D6D6D;
	}

	.draft-box {
		width: 200rpx;
		height: 64rpx;
		border-radius: 38rpx;
		border: 1rpx solid #6D6D6D;
	}

	.issue-box {
		width: 229px;
		height: 64rpx;
		border-radius: 38rpx;
		background: #E5725F;
	}

	.content-font {
		line-height: 1.8;
	}
</style>